<template>
	<div>
		<div class="operate_set_wrap">
			<el-row style="padding: 20px 0;">
				<el-col :span="3" style="font-size: 22px;">
					取货码设置
				</el-col>
				<el-col :span="4">
					<a href="https://fengzhan-file.oss-cn-shanghai.aliyuncs.com/barcode4shelf.pdf" target="_blank">普通货架条形码下载</a>
				</el-col>
				<el-col :span="4">
					<a href="https://fengzhan-file.oss-cn-shanghai.aliyuncs.com/barcode4shelf1513658990493-901-999.pdf" target="_blank">大件货架条形码下载</a>
				</el-col>
			</el-row>
			<!--<h4>取货码设置</h4>-->
			<el-row class="bgf" :gutter="20">
				<el-col :span="6">
					<div @click="selectClick(1)" class="m_item">
						货架模式
						<img v-if="pickCodeType == 1" class="m_item_img" src="../../assets/images/selected_icon.png" />
						<div v-if="pickCodeType == 1" class="z_s">
						</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div @click="selectClick(2)" class="m_item">
						数字模式
						<img v-if="pickCodeType == 2" class="m_item_img" src="../../assets/images/selected_icon.png" />
						<div v-if="pickCodeType == 2" class="z_s">
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script>
	import http from '@/assets/js/http.js'
	export default {
		data() {
			return {
				pickCodeType: '',
			}
		},
		created() {
			this.getPickCodeType();
		},
		methods: {
			getPickCodeType() {
				let that = this;
				this.apiGet("/api/backend/site/setting/pick-code-type/get", null).then(res => {
					if(res.code == 200) {
						that.pickCodeType = res.data.pickCodeType
					}
				})
			},
			selectClick(num) {
				if(this.pickCodeType != num) {
					this.pickCodeType = num
					this.setPickCodeType()
				}
			},
			setPickCodeType() {
				let that = this;
				that.apiPost("/api/backend/site/setting/pick-code-type/set", {
					pickCodeType: this.pickCodeType
				}).then(res => {
					if(res.code == 200) {
						that.$message({
							type: 'success',
							message: '设置成功！'
						})
					}
				})
			}
		},
		mixins: [http]
	}
</script>
<style scoped>
	.operate_set_wrap .bgf {
		background: #fff;
		border-radius: 6px;
		padding: 20px 0;
	}
	
	.m_item {
		border: 1px solid #fff;
		height: 200px;
		border-radius: 3px;
		line-height: 200px;
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		border: 1px solid rgba(121, 121, 121, 1);
		position: relative;
	}
	
	.m_item_img {
		position: absolute;
		left: 10px;
		top: 10px;
		z-index: 10;
	}
	
	.z_s {
		border-width: 40px;
		border-style: solid;
		border-color: #BBBBBB #fff #fff #BBBBBB;
		position: absolute;
		left: 0;
		top: 0;
	}
</style>